<template>
    <IContent :spinShow="loading">
        <ISearch v-model="search">
            <FormItem label="快递代码">
                <Input v-model="search.code" placeholder="快递代码" size="small"></Input>
            </FormItem>
            <FormItem :label-width="1">
                <Button type="primary" icon="ios-search" @click="getLists(1)" size="small">搜索</Button>
                <Button type="success" icon="ios-add" @click="openComponent('ICreate')" size="small">添加</Button>
            </FormItem>
        </ISearch>
        <ITable :current="page.current" :table="table" :total="page.total" @on-page-change="pageChange">
            <template slot-scope="{ row, index }" slot="action">
                <Button size="small" @click="openComponent('IUpdate', {id:row.id})" >编辑</Button>
                <Button size="small" @click="openComponent('IBlacklist', {id:row.id})" >黑名单地址</Button>
            </template>
            <template slot-scope="{ row, index }" slot="status">
                <Poptip v-if="row.status === 0" confirm transfer title="确认要开启这个快递吗？" @on-ok="updateStatus(row.id, 1)">
                    <Button size="small">开启</Button>
                </Poptip>
                <Poptip v-if="row.status === 1" confirm transfer title="确认要关闭这个快递吗？" @on-ok="updateStatus(row.id, 0)">
                    <Button size="small">关闭</Button>
                </Poptip>
            </template>
        </ITable>

        <component v-if="componentProps.value" :is="componentProps.view" v-model="componentProps.value" :props="componentProps.props"
                   @input="getLists(page.current)"></component>
    </IContent>
</template>

<script>
    import contentListPage from "../../../mixins/contentListPage";
    import IContent from "../../../components/content/index";
    import ISearch from "../../../components/content/search";
    import ITable from "../../../components/content/table";
    import ICreate from './create';
    import IUpdate from './update';
    import IBlacklist from './IBlacklist';
    import contentDrawer from "../../../mixins/contentDrawer";


    export default {
        name: "index",
        components: {ITable, ISearch, IContent, ICreate, IUpdate, IBlacklist},
        mixins: [contentListPage, contentDrawer],
        data() {
            return {
                table: {
                    columns: [{
                        title: '快递代码',
                        key: 'code'
                    },{
                        title: '快递名称',
                        key: 'name'
                    },{
                        title: '海关快递代码',
                        key: 'customs_code'
                    },{
                        title: '海关快递名称',
                        key: 'customs_name'
                    },{
                        title: '保价费',
                        key: 'insured'
                    }, {
                        title: '状态',
                        slot: 'status'
                    },{
                        title: '操作',
                        slot: 'action'
                    }
                    ]
                },
                search: {}
            }
        },
        methods: {
            getLists(page = this.page.current) {
                this.loading = true;
                this.$http.get(`system/express`, {
                    params: Object.assign({}, this.search, {page: page})
                }).then((data) => {
                    this.table.data = data.data
                    this.page.total = data.total
                    this.page.current = data.current_page
                }).finally(() => {
                    this.loading = false;
                });
            },
            updateStatus(id, status){
                this.loading = true;
                this.$http.put(`system/express/${id}/status/${status}`).then(() => {
                    this.getLists();
                }).finally(() => {
                    this.loading = false;
                });
            }
        }
    }
</script>

<style scoped>

</style>
